﻿
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="weadmin-nav">
    <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">基础设置</a>
        <a>
            <cite>菜单设置</cite>
        </a>
    </span>
</div>
<div class="weadmin-block">
    <a class="layui-btn layui-btn-sm" name="btnAdd" value="0"><i class="layui-icon"></i>添加</a>
</div>
<table class="layui-table">
    <thead>
        <tr>
            <th>标题</th>
            <th>地址</th>
            <th>图标</th>
            <th>等级</th>
            <th width="100" style="text-align:center">操作</th>
        </tr>
    </thead>
    <tbody id="tbody"></tbody>
</table>
@section scripts{
    <script id="tpl" type="text/html">
        <tr>
            <td style="padding-left:{{d.level*30}}px;">
                {{d.title}}
            </td>
            <td>
                {{d.url||''}}
            </td>
            <td>
                <i class="layui-icon">{{=d.icon}}</i>
            </td>
            <td>{{d.level}}级菜单</td>
            <td align="center">
                <a title="编辑" href="javascript:;" name="btnEdit" value="{{d.id}}" pid="{{d.pId}}">
                    <i class="layui-icon font24">&#xe642;</i>
                </a>
                <a title="删除" href="javascript:;" name="btnDele" value="{{d.id}}">
                    <i class="layui-icon font24">&#xe640;</i>
                </a>
                <a title="添加子级" href="javascript:;" name="btnAdd" value="{{d.id}}">
                    <i class="layui-icon font24">&#xe654;</i>
                </a>
            </td>
        </tr>
    </script>
    <script>
        layui.use(['element', 'laytpl'],
            function () {
                var $ = layui.$;
                var laytpl = layui.laytpl;
                var layer = parent.layer;

                GetMenus();
                $('#tbody').on('click',
                    'a[name=btnDele]',
                    function () {
                        var value = $(this).attr('value');
                        layer.confirm('如果删除将会把子级都删除掉，是否删除?',
                            { icon: 3, title: '提示' },
                            function (index) {
                                $.post('/Menu/DeleAsync',
                                    { id: value },
                                    function (res) {
                                        if (res.status === 200) {
                                            GetMenus();
                                            layer.msg('操作成功', { time: 800 });
                                        } else {
                                            layer.msg('操作失败', { time: 800 });
                                        }
                                    })
                                layer.close(index);
                            });
                    })

                $(document).on('click',
                    'a[name=btnAdd]',
                    function () {
                        var value = $(this).attr('value');
                        layer.open({
                            type: 2,
                            area: ['500px', '400px'],
                            fix: false, //不固定
                            maxmin: true,
                            shade: 0.4,
                            title: '添加菜单',
                            content: '/Menu/Add?Id=' + value,
                            btn: ['确定', '取消'],
                            yes: function (index) {
                                var body = layer.getChildFrame('body', index);
                                $(body).find('#save').click();
                            }
                        });
                    })
                $('#tbody').on('click',
                    'a[name=btnEdit]',
                    function () {
                        var value = $(this).attr('value');
                        var pid = $(this).attr('pid');
                        layer.open({
                            type: 2,
                            area: ['500px', '400px'],
                            fix: false, //不固定
                            maxmin: true,
                            shade: 0.4,
                            title: '编辑菜单',
                            content: '/Menu/Edit?Id=' + value + '&Pid=' + pid,
                            btn: ['确定', '取消'],
                            yes: function (index) {
                                var body = layer.getChildFrame('body', index);
                                $(body).find('#save').click();
                            }
                        });
                    })
                function GetMenus() {
                    $('#tbody').empty();
                    var index = layer.load(2);
                    $.get('/Menu/GetMenusAsync',
                        function (res) {
                            layer.close(index);
                            if (res.status == 200) {
                                var list = res.data;
                                if (list.length > 0) {
                                    layui.each(list,
                                        function (i, item) {
                                            GetTree(item);
                                        })
                                } else {
                                    $('#tbody').html('<tr><td colspan=5 align="center">暂无数据</td></tr>');
                                }
                            }
                        })
                }

                parent.GetMenus = GetMenus;

                function GetTree(item) {
                    var getTpl = tpl.innerHTML;
                    laytpl(getTpl).render(item,
                        function (html) {
                            $('#tbody').append(html);
                            if (item.children) {
                                layui.each(item.children,
                                    function (index, _item) {
                                        GetTree(_item);
                                    })
                            }
                        });

                }
            });


    </script>
}